<template>
<!-- 绑定手机 -->
  <div class="container">
    <v-header :title="title"></v-header>

    <div class="content">
      <form class="mui-input-group">
        <div class="mui-input-row name">
          <div class="input-box">
            <input type="text" class="mui-input-clear" placeholder="请输入昵称" maxlength="12" v-model="userName">
          </div>
        </div>

        <div class="mui-button-row">
          <button type="button" class="mui-btn confirm-btn" @click="save">保存</button>
        </div>
      </form>

    </div>
    
    <v-mask :show="isShowLoading">
      <loading :msg="loadingMsg"></loading>
    </v-mask>

  </div>
</template>

<script type="text/ecmascript-6">

import VHeader from 'components/v-header'
import VMask from 'components/v-mask'
import Loading from 'components/loading'

import { ERR_OK } from 'api/config.js'
import { UpdateName } from 'api/user.js'

export default {
  data() {
    return {
      title: '昵称更改',
      userName: Number,
      isShowLoading: false,
      loadingMsg: '更改昵称'
    }
  },
  components: {
    VHeader,
    VMask,
    Loading
  },
  mounted() {
    mui('.mui-input-row input').input();

    this.userName = this.$store.state.userInfo.userName
  },
  methods: {
    save: function () {
      this.isShowLoading = true
      UpdateName({
        userId: this.$store.state.userInfo.userId,
        userName: this.userName
      }).then((res) => {
        this.isShowLoading = false
        if (res.code == ERR_OK) {
          console.log(res)
          this.$store.state.userInfo.userName = res.object.userName
          mui.toast('更改成功')
          this.$router.goBack()
        } else {
          mui.toast(res.object)
        }
      }).catch(() => {
        this.isShowLoading = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color $color-bg-gray
  .content
    margin-top 20px
    form
      margin 0 30px
      .name
        display flex
        align-items center
        height 50px
        font-size $font-size-small
        border(#ccc) 
        span 
          display block
          width 55px
          color #999999
          line-height 1
        .input-box
          position relative
          flex 1 
          input 
            width 100%
            height 50px
            padding 0 10px 
            &::placeholder
              font-size $font-size-small-s
          .mui-icon-clear
            right 10px !important
    .mui-button-row
      background-color $color-bg-gray
      .confirm-btn
        width 100%
        height 45px
        margin-top 100px
        background-color $color-theme
        color #fff
        font-size $font-size-medium


</style>
